<template>
  <!-- 
  组件名称: Menu 
  功能描述: 菜单组件,动态渲染菜单,从pinia中获取菜单数据,传递给递归组件
  业务归属: layout-default 默认布局
   -->
  <div class="logo">
    <img :src="logo" alt="" width="34px" height="34px" />
    <h1>动力港</h1>
  </div>

  <!-- 
    :router="true：启用路由导航
    作用：让菜单项的点击行为自动触发路由跳转
    组件里的菜单项 index 属性会被解析为路由路径
  
    :default-active="$route.path"：动态高亮当前路由对应的菜单项
    作用：根据当前页面路径自动激活（高亮）对应菜单项
    $route.path 是 Vue Router 提供的当前路由路径
    匹配菜单项中 index 与当前路径一致的项
   -->
  <el-menu :router="true" :default-active="$route.path">
    <menu-item v-for="item in menuItems" :item="item" :key="item.url"></menu-item>
  </el-menu>
</template>

<script setup lang="ts">
// 引入 logo
import logo from "@/assets/logo.png";
// 引入pinia
import { useUserStore } from "@/store/auth";
// 从pinia中获取菜单数据
const userStore = useUserStore();
const menuItems = userStore.menu;

// 引入 递归组件
import MenuItem from "@/components/navMenu/MenuItem.vue";
</script>

<style scoped lang="less">
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding: 10px 0;
  img {
    margin-left: -10px;
  }
  h1 {
    color: #333;
    margin-left: 10px;
    font-size: 22px;
  }
}
.el-menu {
  border: none;
}
</style>
